<!DOCTYPE html>
<html>

<div th:replace="common/jsCssRef :: jsfJsCssRef"></div>

<body class="bgf6">

<div th:replace="common/head :: jsfHeader"></div>

<div class="main-body pb100">
    <div class="container pt10">
        <div class="dflx sbt" id="app">
            <div th:replace="common/left :: jsfLeft"></div>

            <div class="body-right">
                <div class="bread-nav bgff">
                    <ul class="dflx">
                        <li><a href="###">首页</a></li>
                        <li><a href="###">统筹规划</a></li>
                        <li><a href="/view/specialPlan">专项发展规划</a></li>
                        <li><a href="/view/specialPlanAdd">新增</a></li>
                    </ul>
                </div>

                <div class="bgff mt10 pb50 edit-mode">
                    <form class="wrap" id="form">

                        <div class="box">
                            <div class="box-title"><span>编制专项规划基本信息</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title"><i class="cred">*</i> 规划名称</span>
                                    <div class="content">
                                        <input type="text" id="planName" class="form-control" value=""
                                               placeholder="请输入规划名称"/>
                                        <!--<ul class="parsley-errors-list filled" id="parsley-id-4"><li class="parsley-required">*请输入汉字字母</li></ul>-->
                                    </div>
                                    <span class="title">规划编号</span>
                                    <div class="content">
                                        <input type="text" id="planNo" class="form-control" value=""
                                               placeholder="请输入规划编号"/>
                                    </div>
                                </div>
                                <div class="two">
                                    <span class="title">开始年份</span>
                                    <div class="content">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="请选择年份"
                                                   id="planBeginTime" value="">
                                        </div>
                                    </div>
                                    <span class="title">截止年份</span>
                                    <div class="content">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="请选择年份" id="planEndTime"
                                                   value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="two">
                                    <span class="title">编制单位</span>
                                    <div class="content">
                                        <input type="text" id="compileUnit" class="form-control" placeholder="请输入编制单位"
                                               value=""/>
                                    </div>
                                    <span class="title">编制人</span>
                                    <div class="content"><input type="text" id="compilePerson" class="form-control"
                                                                placeholder="请输入编制人" value=""/></div>
                                </div>


                                <div class="two">
                                    <span class="title">编制时间</span>
                                    <div class="content">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="请选择编制时间"
                                                   id="compileTime" value="">
                                        </div>
                                    </div>
                                    <span class="title"></span>
                                    <div class="content">
                                        <div class="input-group">
                                        </div>
                                    </div>
                                </div>

                                <div class="two" style="height: 38px;">
                                    <span class="title">是否来自全市规划</span>
                                    <div class="content">
                                        <el-radio-group v-model="resource" @change="agreeChange"
                                                        style="position:relative;top: 11px;left: 10px;">
                                               
                                            <el-radio label="1">是</el-radio>
                                               
                                            <el-radio label="2">否</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <span class="title"><span v-show="resource==1">所属全市规划</span></span>
                                    <div class="content">
                                        <select v-show="resource==1" v-model="belongPlan" class="form-control c999"
                                                id="belongPlan">
                                            <option value='' disabled selected class='none'>请选择所属全市规划</option>
                                            <option :nam="item.plan_name" :data="item.plan_id" :value="item.plan_no" v-for="item in cityList">
                                                {{item.plan_name}}
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div class="one">
                                    <span class="title fj">上传附件</span>
                                    <div class="content">
                                        <input type="file" class="filestyle" data-input="false" id="filestyle-1"
                                               tabindex="-1"
                                               style="position: absolute; clip: rect(0px, 0px, 0px, 0px);">
                                        <div class="bootstrap-filestyle input-group upload">
                        						<span class="group-span-filestyle" tabindex="0">
                                                    <i class="fa fa-plus" aria-hidden="true"></i>
                        							<p class="buttonText">上传附件</p>
                        						</span>
                                        </div>
                                        <p class="f12 c999 mt3 uploadText">只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</p>
                                    </div>
                                </div>

                                <div class="one remark">
                                    <span class="title">备注</span>
                                    <div class="content">
                                        <textarea name="" id="remark" class="form-control" placeholder="请输入内容" rows=""
                                                  cols=""></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="tc mt40">
                            <button type="button" class="btn btn-primary f12" onclick="submitPlan()"> 提交</button>
                            <button type="button" class="btn btn-white f12" onclick="savePlan()"> 保存</button>
                            <button type="button" class="btn btn-white f12"> 取消</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">

    $('#special').addClass('active');

    var appPage = new Vue({
        el: '#app',
        data: {
            plan: {},
            resource: "2",
            belongPlan: "",
            cityList: []
        },
        wathch: {
            resource(newVal) {
                console.log(newVal);
            }
        },
        created: function () {
            this.getCity();
        },
        methods: {
            agreeChange(val) {
                if (val == 2) {
                    this.belongPlan = "";
                }
            },
            getCity() {
                let _this = this;
                $.ajax({
                    'url': contentPath + '/cityPlan/getBasic',
                    'dataType': 'json',
                    'type': 'get',
                    'contentType': 'application/json',
                    'success': function (result) {
                        if (result.code != 1000) {
                            alert(result.msg);
                            if (result.code == 5555) {
                                window.location.href = '/';
                            }
                            return;
                        }
                        _this.cityList = result.data;
                    },
                    'error': function (result) {
                    }
                });
            }
        }
    })


    $('#planBeginTime').fdatepicker({format: 'yyyy-mm-dd'});
    $('#planEndTime').fdatepicker({format: 'yyyy-mm-dd'});
    $('#compileTime').fdatepicker({format: 'yyyy-mm-dd'});
    $('#auditTime').fdatepicker({format: 'yyyy-mm-dd'});
    $('#approvalTime').fdatepicker({format: 'yyyy-mm-dd'});


    function submitPlan() {
        processSavePlan(2);
    }

    function savePlan() {
        processSavePlan(1);
    }

    function processSavePlan(currentState) {
        if ($('#planName').val() == '') {
            alert('请输入规划名称');
            return;
        }
        if ($('#planNo').val() == '') {
            alert('请输入规划编号');
            return;
        }
        if ($('#planBeginTime').val() == '') {
            alert('请输入开始年份');
            return;
        }
        if ($('#planEndTime').val() == '') {
            alert('请输入截止年份');
            return;
        }
        if ($('#compileTime').val() == '') {
            alert('请输入编制时间');
            return;
        }
        let selected = $('#belongPlan option:selected').text();
        var params = {
            'planName': $('#planName').val(),
            'planNo': $('#planNo').val(),
            'planBeginTime': $('#planBeginTime').val() + " 00:00:00",
            'planEndTime': $('#planEndTime').val() + " 00:00:00",
            'compileUnit': $('#compileUnit').val(),
            'compilePerson': $('#compilePerson').val(),
            'compileTime': $('#compileTime').val() + " 00:00:00",
            'belongCityPlanName': $('#belongPlan option:selected').attr("nam"),
            'belongCityPlanNo': $('#belongPlan').val(),
            'belongCityPlanId': $('#belongPlan option:selected').attr("data"),
            'remark': $('#remark').val(),
            'auditResult': -1,
            'isApproval': -1,
            'auditPerson': '',
            'approvalPerson': '',
            'auditTime': '2020-10-10 00:00:00',
            'approvalTime': '2020-10-10 00:00:00',
            'isDelete': 1,
            'compileUnitId': 0,//TODO 待确定
            'currentState': currentState
        };


        $.ajax({
            'url': contentPath + '/specialPlan/insert',
            'dataType': 'json',
            'type': 'post',
            'contentType': 'application/json',
            'data': JSON.stringify(params),
            'success': function (result) {
                if (result.code != 1000) {
                    alert(result.msg);
                    if (result.code == 5555) {
                        window.location.href = '/';
                    }
                    return;
                }

                appPage.$message({
                    type: 'info',
                    message: currentState == 1 ? '保存成功' : '提交成功'
                });

                window.location.href = contentPath + '/view/specialPlan';
            },
            'error': function (result) {
            }
        });


    }

</script>
</body>
</html>
